<template>
  <div
    class="record"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div class="record-box w1200">
      <div class="tabs">
        <ul class="clearfix" v-if="isEditPage">
          <li
            v-for="(item, index) in tabsList"
            :key="index"
            :class="[active == index ? 'active' : '']"
            @click="tabsHandClick(index)"
          >
            {{ item }}
          </li>
        </ul>
        <ul class="clearfix" v-else>
          <li
            v-for="(item, index) in tabsList"
            :key="index"
            :class="[active == index ? 'active' : '']"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="apply-con">
        <div class="card-info box" v-if="active == 0">
          <el-form
            :model="cardForm"
            :rules="cardrules"
            :inline="true"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm form-group"
            label-position="top"
          >
            <div class="title">基本信息</div>
            <div class="bgf">
              <el-form-item label="姓名" prop="username">
                <el-input
                  type="text"
                  v-model="cardForm.username"
                  placeholder="请输入姓名"
                ></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="idCard">
                <el-input
                  type="text"
                  v-model="cardForm.idCard"
                  placeholder="请输入身份证号"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系电话" prop="telephone">
                <el-input
                  type="text"
                  v-model="cardForm.telephone"
                  placeholder="请输入联系电话"
                ></el-input>
              </el-form-item>
              <el-form-item label="户籍所在地" prop="register">
                <el-input
                  type="text"
                  v-model="cardForm.register"
                  placeholder="请输入户籍所在地"
                ></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="mailbox">
                <el-input
                  type="text"
                  v-model="cardForm.mailbox"
                  placeholder="请输入邮箱"
                ></el-input>
              </el-form-item>
      
                     <el-form-item label="选择基地" prop="baseId">
                <el-select v-model="cardForm.baseId" placeholder="请选择">
                  <el-option
                    v-for="item in baseOptions"
                    :key="item.baseId"
                    :label="item.baseName"
                    :value="item.baseId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
                      <el-form-item label="文化程度">
                <el-select v-model="cardForm.diploma" placeholder="请选择">
                  <el-option
                    v-for="item in cultureOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="身份证正面" prop="idCardUrlFront">
                    <upload
                      :img="cardForm.idCardUrlFront"
                      @update="updateCardFront"
                      :uploadURL="cardUpUrl"
                    />
                  </el-form-item>
                  <el-form-item label="身份证反面" prop="idCardUrlReverse">
                    <upload
                      :img="cardForm.idCardUrlReverse"
                      :uploadURL="cardUpUrl"
                      @update="updateCardreverse"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              
            </div>
            <div class="title">婚姻情况</div>
            <div class="bgf">
              <el-form-item label="婚姻情况">
                <el-select v-model="cardForm.isMarried" placeholder="请选择" @change="selectMarried(cardForm.isMarried)">
                  <el-option
                    v-for="item in marriedOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="配偶姓名">
                <el-input
                  type="text"
                  v-model="cardForm.mateName"
                  :disabled="cardForm.isMarried==0"
                  placeholder="请输入配偶姓名"
                ></el-input>
              </el-form-item>
              <el-form-item label="配偶身份证">
                <el-input
                  type="text"
                  v-model="cardForm.mateIdCard"
                  :disabled="cardForm.isMarried==0"
                  placeholder="请输入配偶身份证"
                ></el-input>
              </el-form-item>
              <el-form-item label="配偶联系方式">
                <el-input
                  type="text"
                  v-model="cardForm.mateTelephone"
                  :disabled="cardForm.isMarried==0"
                  placeholder="请输入配偶联系方式"
                ></el-input>
              </el-form-item>
              <el-form-item label="配偶月收入">
                <el-input
                  type="text"
                  v-model="cardForm.mateIncome"
                  :disabled="cardForm.isMarried==0"
                  placeholder="请输入配偶月收入"
                ></el-input>
              </el-form-item>
              <el-form-item label="配偶工作单位">
                <el-input
                  type="text"
                  v-model="cardForm.mateUnit"
                  :disabled="cardForm.isMarried==0"
                  placeholder="请输入配偶工作单位"
                ></el-input>
              </el-form-item>
              <el-form-item label="居住情况">
                <el-select v-model="cardForm.reside" placeholder="请选择">
                  <el-option
                    v-for="item in resideOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="家庭月收入">
                <el-input
                  type="text"
                  v-model="cardForm.houseMouthIncome"
                  placeholder="请输入家庭月收入"
                ></el-input>
              </el-form-item>
              <el-form-item label="家庭住址">
                <el-input
                  type="text"
                  v-model="cardForm.houseAddress"
                  placeholder="请输入家庭住址"
                ></el-input>
              </el-form-item>
            </div>
            <div class="title">资产情况</div>
            <div class="bgf">
              <el-form-item label="是否有车">
                <el-select v-model="cardForm.hasCar" placeholder="请选择" @change="selectCar(cardForm.hasCar)">
                  <el-option
                    v-for="item in iscarOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="车子型号">
                <el-input
                  type="text"
                  v-model="cardForm.carModel"
                  :disabled="cardForm.hasCar==0"
                  placeholder="请输入车子型号"
                ></el-input>
              </el-form-item>
              <el-form-item label="车子购买日期">
                <el-date-picker
                  v-model="cardForm.buyCarDate"
                  :disabled="cardForm.hasCar==0"
                  type="date"
                  placeholder="    请选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="车牌号">
                <el-input
                  type="text"
                  v-model="cardForm.carNo"
                  :disabled="cardForm.hasCar==0"
                  placeholder="请输入车牌号入"
                ></el-input>
              </el-form-item>
              <el-form-item label="车子情况">
                <el-select v-model="cardForm.carstate" placeholder="请选择" :disabled="cardForm.hasCar==0">
                  <el-option
                    v-for="item in carOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否有房">
                <el-select v-model="cardForm.hasHouse" placeholder="请选择" @change="selectHouse(cardForm.hasHouse)">
                  <el-option
                    v-for="item in hasHouseOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="房子情况">
                <el-select v-model="cardForm.housestate" placeholder="请选择" :disabled="cardForm.hasHouse==0">
                  <el-option
                    v-for="item in carOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="房子购买日期">
                <el-date-picker
                  v-model="cardForm.buyHouseDate"
                  :disabled="cardForm.hasHouse==0"
                  type="date"
                  placeholder="    请选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="房屋面积">
                <el-input
                  type="text"
                  v-model="cardForm.houseArea"
                  :disabled="cardForm.hasHouse==0"
                  placeholder="请输入房屋面积"
                ></el-input>
              </el-form-item>
              <el-form-item label="房屋位置">
                <el-input
                  type="text"
                  v-model="cardForm.houseLocation"
                  :disabled="cardForm.hasHouse==0"
                  placeholder="请输入房屋位置"
                ></el-input>
              </el-form-item>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="上传行驶证正面">
                    <upload
                      :img="cardForm.drivingLicenseUrl"
                      @update="updateDrivingLicenseUrl"
                      :uploadURL="fileUploadUrl"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="title">银行卡信息</div>
            <div class="bgf">
              <el-form-item label="卡号">
                <el-input
                  type="number"
                  v-model="cardForm.bankCardNo"
                  placeholder="请输入卡号"
                ></el-input>
              </el-form-item>
              <el-form-item label="开户行">
                <el-input
                  type="text"
                  v-model="cardForm.openingBank"
                  placeholder="请输入开户行"
                ></el-input>
              </el-form-item>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="银行卡正面">
                    <upload
                      :img="cardForm.bankCardUrl"
                      @update="updateBank"
                      :uploadURL="fileUploadUrl"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="title">紧急联系人</div>
            <div class="bgf">
              <el-form-item label="姓名">
                <el-input
                  type="text"
                  v-model="cardForm.emergencyContactName"
                  placeholder="请输入姓名"
                ></el-input>
              </el-form-item>
              <el-form-item label="电话">
                <el-input
                  type="number"
                  v-model="cardForm.emergencyContactPhone"
                  placeholder="请输入电话"
                  max-length="11"
                ></el-input>
              </el-form-item>
              <el-form-item label="关系">
                <el-input
                  type="text"
                  v-model="cardForm.emergencyContactLocation"
                  placeholder="请输入关系"
                ></el-input>
              </el-form-item>
              <el-row>
                <el-col :span="24">
                  <el-form-item>
                    <el-button class="next-btn" @click="onSubmit('ruleForm', 0)"
                      >下一步</el-button
                    >
                    <el-button class="cancle" @click="$router.go(-1)"
                      >取消</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
        <div class="value-info box" v-if="active == 1">
          <el-form
            :model="valueForm"
            :rules="valuerules"
            :inline="true"
            ref="valueruleForm"
            label-width="100px"
            class="demo-ruleForm form-group"
            label-position="top"
          >
            <div class="title">规模</div>
            <div class="bgf">
              <el-form-item label="基地面积（亩）" prop="baseArea">
                <el-input
                  type="number"
                  v-model="valueForm.baseArea"
                  placeholder="请输入基地面积（亩）"
                ></el-input>
              </el-form-item>
              <el-form-item label="基地位置" prop="baseLocation">
                <el-input
                  type="text"
                  v-model="valueForm.baseLocation"
                  placeholder="请输入基地位置"
                ></el-input>
              </el-form-item>
              <el-form-item label="种植物品类" prop="plantspecies">
                <el-input
                  type="text"
                  v-model="valueForm.plantspecies"
                  placeholder="请输入种植物品类"
                ></el-input>
              </el-form-item>
              <el-form-item label="种植年限" prop="plantYears">
                <el-input
                  type="number"
                  v-model="valueForm.plantYears"
                  placeholder="请输入种植年限"
                ></el-input>
              </el-form-item>
              <el-form-item label="种植数量" prop="plantNum">
                <el-input
                  type="number"
                  v-model="valueForm.plantNum"
                  placeholder="请输入种植数量"
                ></el-input>
              </el-form-item>
              <el-form-item label="每亩平均产量" prop="averageProduct">
                <el-input
                  type="text"
                  v-model="valueForm.averageProduct"
                  placeholder="请输入每亩平均产量"
                ></el-input>
              </el-form-item>
            </div>
            <div class="title">租金情况</div>
            <div class="bgf">
              <el-form-item label="租金总额">
                <el-input
                  type="number"
                  v-model="valueForm.rental"
                  placeholder="请输入租金总额"
                ></el-input>
              </el-form-item>
              <el-form-item label="租金缴纳方式">
                <el-input
                  type="text"
                  v-model="valueForm.rentPayWay"
                  placeholder="请输入租金缴纳方式"
                ></el-input>
              </el-form-item>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="上传租赁合同(正面)">
                    <upload
                      :img="valueForm.contractTenancy"
                      @update="updatecontractTenancy"
                      :uploadURL="fileUploadUrl"
                    />
                  </el-form-item>
                  <el-form-item label="上传房租缴纳凭证(正面)">
                    <upload
                      :img="valueForm.payVoucher"
                      @update="updatepayVoucher"
                      :uploadURL="fileUploadUrl"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="title">基础设施情况</div>
            <div class="bgf">
              <el-form-item label="道路情况">
                <el-select v-model="valueForm.hasHighWay" placeholder="请选择">
                  <el-option
                    v-for="item in hasHighWayOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="道路建设投入">
                <el-input
                  type="text"
                  v-model="valueForm.roadConstructionInto"
                  placeholder="请输入道路建设投入"
                ></el-input>
              </el-form-item>
              <el-form-item label="水设施情况">
                <el-input
                  type="text"
                  v-model="valueForm.waterFacility"
                  placeholder="请输入水设施情况"
                ></el-input>
              </el-form-item>
              <el-form-item label="水利建设投入">
                <el-input
                  type="text"
                  v-model="valueForm.waterConstructionInto"
                  placeholder="请输入水利建设投入"
                ></el-input>
              </el-form-item>
              <el-form-item label="基地仓库情况">
                <el-input
                  type="text"
                  v-model="valueForm.baseWarehouse"
                  placeholder="请输入基地仓库情况"
                ></el-input>
              </el-form-item>
              <el-form-item label="仓库建设投入">
                <el-input
                  type="text"
                  v-model="valueForm.warehouseConstructionInto"
                  placeholder="请输入仓库建设投入"
                ></el-input>
              </el-form-item>
              <el-form-item label="基地建设情况">
                <el-input
                  type="text"
                  v-model="valueForm.baseConstruction"
                  placeholder="请输入基地建设情况"
                ></el-input>
              </el-form-item>
              <el-form-item label="基地建设投入">
                <el-input
                  type="text"
                  v-model="valueForm.baseConstructionInto"
                  placeholder="请输入基地建设投入"
                ></el-input>
              </el-form-item>
              <el-form-item label="加工配套情况">
                <el-input
                  type="text"
                  v-model="valueForm.processSupportingFacility"
                  placeholder="请输入加工配套情况"
                ></el-input>
              </el-form-item>
              <el-form-item label="加工配套投入">
                <el-input
                  type="text"
                  v-model="valueForm.processSupportingFacilityInto"
                  placeholder="请输入加工配套投入"
                ></el-input>
              </el-form-item>
              <el-row>
                <el-col :span="24">
                  <el-form-item>
                    <el-button
                      class="next-btn"
                      @click="onSubmit('valueruleForm', 1)"
                      >下一步</el-button
                    >
                    <el-button class="cancle" @click="active = 0"
                      >返回上一步</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
        <div class="power-info box" v-if="active == 2">
          <el-form
            :model="powerForm"
            :rules="powerrules"
            :inline="true"
            ref="powerruleForm"
            label-width="100px"
            class="demo-ruleForm form-group"
            label-position="top"
          >
            <div class="title">公司基础运营</div>
            <div class="bgf">
              <el-form-item label="公司员工数量" prop="staffNum">
                <el-input
                  type="number"
                  v-model="powerForm.staffNum"
                  placeholder="请输入公司员工数量"
                ></el-input>
              </el-form-item>
              <el-form-item label="公司专家数量" prop="expertNum">
                <el-input
                  type="number"
                  v-model="powerForm.expertNum"
                  placeholder="请输入公司专家数量"
                ></el-input>
              </el-form-item>
              <el-form-item label="月固定工资开支" prop="mouthSalarySpending">
                <el-input
                  type="number"
                  v-model="powerForm.mouthSalarySpending"
                  placeholder="请输入月固定工资开支"
                ></el-input>
              </el-form-item>
              <el-form-item label="水费月均开支" prop="mouthWaterRateSpending">
                <el-input
                  type="number"
                  v-model="powerForm.mouthWaterRateSpending"
                  placeholder="请输入水费月均开支"
                ></el-input>
              </el-form-item>

              <el-form-item
                label="电费月均开支"
                prop="mouthElectricRateSpending"
              >
                <el-input
                  type="number"
                  v-model="powerForm.mouthElectricRateSpending"
                  placeholder="请输入电费月均开支"
                ></el-input>
              </el-form-item>

              <el-form-item label="公司股东数量" prop="shareholderNum">
                <el-input
                  type="number"
                  v-model="powerForm.shareholderNum"
                  placeholder="请输入公司股东数量"
                ></el-input>
              </el-form-item>
              <el-form-item label="公司股东姓名" prop="shareholderNames">
                <el-input
                  type="text"
                  v-model="powerForm.shareholderNames"
                  placeholder="请输入公司股东姓名"
                ></el-input>
              </el-form-item>
              <el-form-item label="公司股东占股情况" prop="shareholderRatio">
                <el-input
                  type="text"
                  v-model="powerForm.shareholderRatio"
                  placeholder="请输入公司股东占股情况"
                ></el-input>
              </el-form-item>
              <el-row>
                <el-col :span="24">
                  <el-form-item
                    label="上传水费缴纳凭证"
                    prop="waterRatePayVoucher"
                  >
                    <upload
                      :img="powerForm.waterRatePayVoucher"
                      @update="updateWaterFee"
                      :uploadURL="fileUploadUrl"
                    />
                  </el-form-item>
                  <el-form-item
                    label="上传电费缴纳凭证"
                    prop="electricRatePayVoucher"
                  >
                    <upload
                      :img="powerForm.electricRatePayVoucher"
                      @update="updateelectricityFee"
                      :uploadURL="fileUploadUrl"
                    />
                  </el-form-item>
                  <el-form-item label="上传营业执照" prop="businessLicense">
                    <upload
                      :img="powerForm.businessLicense"
                      @update="updateOpenPhotp"
                      :uploadURL="fileUploadUrl"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="title">基地管理情况</div>
            <div class="bgf">
              <el-form-item label="基地化肥使用年投入">
                <el-input
                  type="text"
                  v-model="powerForm.baseChemicalFertilizerYearIncome"
                  placeholder="请输入基地化肥使用年投入"
                ></el-input>
              </el-form-item>
              <el-form-item label="基地农药使用年投入">
                <el-input
                  type="text"
                  v-model="powerForm.basePesticideYearIncome"
                  placeholder="请输入基地农药使用年投入"
                ></el-input>
              </el-form-item>
              <el-form-item label="基地临时工年费用">
                <el-input
                  type="text"
                  v-model="powerForm.baseDaylaborerYearFee"
                  placeholder="请输入基地临时工年费用"
                ></el-input>
              </el-form-item>
              <el-form-item label="基地种苗购买投入">
                <el-input
                  type="text"
                  v-model="powerForm.baseGermchitBuyIncome"
                  placeholder="请输入基地种苗购买投入"
                ></el-input>
              </el-form-item>
            </div>
            <div class="title">基地收入情况</div>
            <div class="bgf">
              <el-form-item label="基地未来三年产量预估">
                <el-input
                  type="number"
                  v-model="powerForm.baseFutureThreeYearOutput"
                  placeholder="请输入基地未来三年产量预估"
                ></el-input>
              </el-form-item>
              <el-form-item label="种植物每吨单价">
                <el-input
                  type="text"
                  v-model="powerForm.plantsPertonPrice"
                  placeholder="请输入种植物每吨单价"
                ></el-input>
              </el-form-item>
            </div>
            <div class="title">公司专利情况</div>
            <div class="bgf">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="公司获得专利" style="width: 90%">
                    <el-input
                      type="textarea"
                      v-model="powerForm.patentsOfCompany"
                      :rows="2"
                      placeholder="请输入公司获得专利"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="公司取得商标" style="width: 90%">
                    <el-input
                      type="textarea"
                      v-model="powerForm.brandOfCompany"
                      placeholder="请输入公司取得商标"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="上传专利">
                    <moreUpload
                      :img="powerForm.patentsUrl"
                      :uploadURL="fileUploadUrl"
                    ></moreUpload>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item>
                    <el-button
                      class="next-btn"
                      @click="onSubmit('powerruleForm', 2)"
                      >下一步</el-button
                    >
                    <el-button class="cancle" @click="active = 1"
                      >返回上一步</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
        <div class="history-info box" v-if="active == 3">
          <el-form
            :model="historyForm"
            :rules="historyrules"
            :inline="true"
            ref="historyruleForm"
            label-width="100px"
            class="demo-ruleForm form-group"
            label-position="top"
          >
            <div class="title">公司荣誉情况</div>

            <div class="bgf">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="公司获得荣誉" style="width: 90%">
                    <el-input
                      type="textarea"
                      v-model="historyForm.honorOfCompany"
                      placeholder="请输入公司获得荣誉"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row> </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="上传公司荣誉证书" style="width: 90%">
                    <moreUpload
                      :img="historyForm.honorCertificateOfCompany"
                      :uploadURL="fileUploadUrl"
                    ></moreUpload>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="公司管理团队获得荣誉" style="width: 90%">
                    <el-input
                      type="textarea"
                      v-model="historyForm.honorOfManagementTeam"
                      placeholder="请输入公司管理团队获得荣誉"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row> </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="上传公司管理团队获得荣誉">
                    <moreUpload
                      :img="historyForm.honorCertificateOfManagementTeam"
                      :uploadURL="fileUploadUrl"
                    ></moreUpload>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="title">公司信用情况</div>

            <div class="bgf">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="公司征信上传" style="width: 90%">
                    <upload
                      :img="historyForm.creditInvestigationOfCompany"
                      @update="updateCreditInvestigationOfCompany"
                      :uploadURL="fileUploadUrl"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row> </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="公司法人征信上传">
                    <upload
                      :img="historyForm.creditInvestigationOfLegalPerson"
                      @update="updateCreditInvestigationOfLegalPerson"
                      :uploadURL="fileUploadUrl"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item>
                    <el-button
                      class="next-btn"
                      @click="onSubmit('historyruleForm', 3)"
                      >下一步</el-button
                    >
                    <el-button class="cancle" @click="active = 2"
                      >返回上一步</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
        <div class="relation-info box" v-if="active == 4">
          <el-form
            :model="relationForm"
            :rules="relationrules"
            :inline="true"
            ref="relationruleForm"
            label-width="100px"
            class="demo-ruleForm form-group"
            label-position="top"
          >
            <div class="title">公司前三大经销商</div>

            <div class="bgf">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="公司第一大经销商名称">
                    <el-input
                      type="text"
                      v-model="relationForm.firstDealerName"
                      placeholder="请输入公司第一大经销商名称"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="年均采购数量、金额">
                    <el-input
                      type="text"
                      v-model="relationForm.firstDealerNum"
                      placeholder="请输入年均采购数量、金额"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="公司第二大经销商名称">
                    <el-input
                      type="text"
                      v-model="relationForm.secondDealerName"
                      placeholder="请输入公司第二大经销商名称"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="年均采购数量、金额">
                    <el-input
                      type="text"
                      v-model="relationForm.secondDealerNum"
                      placeholder="请输入年均采购数量、金额"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="公司第三大经销商名称">
                    <el-input
                      type="text"
                      v-model="relationForm.thirdDealerName"
                      placeholder="请输入公司第三大经销商名称"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="年均采购数量、金额">
                    <el-input
                      type="text"
                      v-model="relationForm.thirdDealerNum"
                      placeholder="请输入年均采购数量、金额"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="title">当地关系</div>

            <div class="bgf">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="法人当地居住时间">
                    <el-date-picker
                      v-model="relationForm.legalPersonDwellTime"
                      type="date"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="公司当地成立时间">
                    <el-date-picker
                      v-model="relationForm.companySetUpTime"
                      type="date"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="公司是否获得经营权证">
                    <el-select
                      v-model="relationForm.hasManagerWarrant"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="公司是否属于当地龙头企业">
                    <el-select
                      v-model="relationForm.isLeadingEnterprise"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="title">法人关系</div>

            <div class="bgf">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="法人入股公司名称">
                    <el-input
                      type="text"
                      v-model="relationForm.legalPersonOfCompanyName"
                      placeholder="请输入法人入股公司名称"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="占股比例">
                    <el-input
                      type="text"
                      v-model="relationForm.ratioOfShareHolding"
                      placeholder="请输入占股比例"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="法人简介" style="width: 80%">
                    <el-input
                      type="textarea"
                      v-model="relationForm.legalPersonInfo"
                      placeholder="请输入法人简介"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item>
                    <el-button
                      class="next-btn"
                      @click="onSubmit('relationruleForm', 4)"
                      >下一步</el-button
                    >
                    <el-button class="cancle" @click="active = 3"
                      >返回上一步</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <FooterPage></FooterPage>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import navPage from "../../components/nav";
import upload from "../../components/upLoad/index";
import moreUpload from "../../components/upLoad/moreUpload";
import { isCardID, phone, email } from "../../plugins/validate";
import Cookie from "js-cookie";
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage,
    upload,
    moreUpload,
  },
  data() {
    var cardValidate = (rule, value, callback) => {
      isCardID(rule, value, callback);
    };
    var phoneValidate = (rule, value, callback) => {
      phone(rule, value, callback);
    };
    var emailValidate = (rule, value, callback) => {
      email(rule, value, callback);
    };
    return {
      isLogin: Cookie.get("token"),
      fileUploadUrl: this.fileUploadUrl,
      active: 0,
      tabsList: [
        "填写身份信息",
        "填写价值信息",
        "填写能力信息",
        "填写历史信息",
        "填写关系信息",
      ],
      cardForm: {
        baseId:"",//选择基地
        isMarried:"0",//婚姻情况
        bankCardUrl:"",// 银行卡图片
        id: "",
        bankCardNo: "", // 银行卡号
        openingBank: "", // 银行开户行
        drivingLicenseUrl: "", //行驶证图片
        idCardUrlFront: "", // 身份证正面
        idCardUrlReverse: "", //身份证反面
        username: "", //姓名
        idCard: "", //身份证号
        telephone: "", //联系电话
        mailbox: "", //邮箱
        register: "", //户籍所在地
        diploma: "", //文化程度
        mateUnit: "", //婚姻情况:配偶工作单位
        mateTelephone: "", //婚姻情况:配偶联系方式
        mateName: "", //婚姻情况:配偶姓名
        mateIncome: "", // 婚姻情况:配偶收入
        mateIdCard: "", //婚姻情况:配偶身份证号码
        houseAddress: "", //婚姻情况:家庭住址
        reside: "", // 婚姻情况:居住情况
        houseMouthIncome: "", // 婚姻情况:家庭月收入
        hasCar: "0", // 是否有车
        carstate: "", // 车子情况
        carModel: "", //车子型号
        carNo: "", //资产情况:车牌号
        buyCarDate: "", //车子购买日期
        buyHouseDate: "", // 房子购买日期
        housestate: "", //:房子情况
        hasHouse: "0", //是否有房
        houseArea: "", //房屋面积
        houseLocation: "", //房屋位置
        emergencyContactLocation: "", //紧急联系人:关系
        emergencyContactName: "", //紧急联系人:姓名
        emergencyContactPhone: "", //紧急联系人:电话
      },

      cardrules: {
        username: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        idCard: [{ validator: cardValidate, trigger: "blur", required: true }],
        telephone: [
          { required: true, validator: phoneValidate, trigger: "blur" },
        ],
        register: [
          { required: true, message: "请输入户籍所在地", trigger: "blur" },
        ],
        mailbox: [
          { validator: emailValidate, required: true, trigger: "blur" },
        ],
        idCardUrlFront: [
          { required: true, message: "请上传身份证正面", trigger: "blur" },
        ],
        idCardUrlReverse: [
          { required: true, message: "请上传身份证反面", trigger: "blur" },
        ],
        baseId:[
           { required: true, message: "请选择基地", trigger: "change" },
        ]
      },
      // 是否结婚
      marriedOptions: [
        {
          value: "1",
          label: "已婚",
        },
        {
          value: "0",
          label: "未婚",
        },
      ],
      // 居住情况
      resideOptions: [
        {
          value: "自主房屋",
          label: "自主房屋",
        },
        {
          value: "租房",
          label: "租房",
        },
      ],
      // 是否有房
      hasHouseOptions: [
        {
          value: "0",
          label: "无房",
        },
        {
          value: "1",
          label: "有房",
        },
      ],
      // 车子情况
      carOptions: [
        {
          value: "全款",
          label: "全款",
        },
        {
          value: "按揭",
          label: "按揭",
        },
      ],
      iscarOptions: [
        {
          value: "0",
          label: "无车",
        },
        {
          value: "1",
          label: "有车",
        },
      ],
      // 文化程度
      cultureOptions: [
        {
          value: "博士",
          label: "博士",
        },
        {
          value: "研究生",
          label: "研究生",
        },
        {
          value: "本科",
          label: "本科",
        },
        {
          value: "大专",
          label: "大专",
        },
        {
          value: "中专",
          label: "中专",
        },
        {
          value: "高中",
          label: "高中",
        },
        {
          value: "初中",
          label: "初中",
        },
        {
          value: "小学",
          label: "小学",
        },
        {
          value: "成人教育",
          label: "成人教育",
        },
      ],
      options: [
        {
          value: "是",
          label: "是",
        },
        {
          value: "否",
          label: "否",
        },
      ],
      hasHighWayOptions: [
        {
          value: "0",
          label: "无公路",
        },
        {
          value: "1",
          label: "有公路",
        },
      ],
      // 价值信息
      valueForm: {
        id: "",
        baseLocation: "", //规模:基地位置
        baseArea: "", //基地面积
        plantspecies: "", //种植物品类
        plantYears: "", //种植年限
        plantNum: "", //规模:种植数量
        averageProduct: "", //规模:每亩平均产量
        rentPayWay: "", //租金情况:租金缴纳方式
        rental: "", //租金情况:租金总额
        payVoucher: "", //房租缴纳凭证图片
        contractTenancy: "", //上传租赁合同
        hasHighWay: "", //是否有公路
        roadConstructionInto: "", //基础设施情况:道路建设投入
        waterFacility: "", //基础设施情况:水利设施情况
        waterConstructionInto: "", //基础设施情况:水利建设投入
        baseWarehouse: "", //基础设施情况:基地仓库情况
        warehouseConstructionInto: "", //仓库建设投入
        baseConstruction: "", //基地建设情况
        baseConstructionInto: "", //基地建设投入
        processSupportingFacility: "", //基础设施情况:加工配套情况
        processSupportingFacilityInto: "", //加工配套投入
      },
      valuerules: {
        baseLocation: [
          { required: true, message: "请输入基地位置", trigger: "blur" },
        ],
        baseArea: [
          { required: true, message: "请输入基地面积", trigger: "blur" },
        ],
        plantspecies: [
          { required: true, message: "请输入种植物品类", trigger: "blur" },
        ],
        plantYears: [
          { required: true, message: "请输入种植年限", trigger: "blur" },
        ],
        plantNum: [
          { required: true, message: "请输入种植数量", trigger: "blur" },
        ],
        averageProduct: [
          { required: true, message: "请输入每亩平均产量", trigger: "blur" },
        ],
      },
      // 能力信息
      powerForm: {
        id: "",
        staffNum: "", //公司员工数量
        expertNum: "", //公司专家数量
        mouthSalarySpending: "", //月固定工资
        mouthWaterRateSpending: "", // 水费月均开支
        mouthElectricRateSpending: "", // 公司基础运营:电费月均开支
        shareholderNames: "", //公司基础运营:公司股东姓名
        shareholderNum: "", //公司基础运营:公司股东数量
        shareholderRatio: "", //公司基础运营:公司股东占股情况
        waterRatePayVoucher: "", //公司基础运营:水费缴纳凭证
        electricRatePayVoucher: "", //公司基础运营:电费缴纳凭证
        businessLicense: "", //公司基础运营:营业执照
        baseChemicalFertilizerYearIncome: "", //基地化肥使用年投入
        basePesticideYearIncome: "", //基地农药使用年投入
        baseDaylaborerYearFee: "", //基地农药使用年投入
        baseGermchitBuyIncome: "", //基地种苗购买投入
        baseFutureThreeYearOutput: "", //基地未来三年产量预估
        plantsPertonPrice: "", //种植物每吨单价
        patentsOfCompany: "", //公司获得专利
        brandOfCompany: "", //公司获得的商标
        patentsUrl: [], //公司获得专利图片
      },
      powerrules: {
        staffNum: [
          { required: true, message: "请输入公司数量", trigger: "blur" },
        ],
        expertNum: [
          { required: true, message: "请输入公司专家数量", trigger: "blur" },
        ],
        mouthSalarySpending: [
          { required: true, message: "请输入月固定工资", trigger: "blur" },
        ],
        mouthWaterRateSpending: [
          { required: true, message: "请输入水费月均开支", trigger: "blur" },
        ],
        mouthElectricRateSpending: [
          { required: true, message: "请输入电费月均开支", trigger: "blur" },
        ],
        shareholderNum: [
          { required: true, message: "请输入公司股东数量", trigger: "blur" },
        ],
        shareholderNames: [
          { required: true, message: "请输入公司股东姓名", trigger: "blur" },
        ],
        shareholderRatio: [
          {
            required: true,
            message: "请输入公司股东占股情况",
            trigger: "blur",
          },
        ],
        // waterRatePayVoucher: [
        //   {
        //     required: true,
        //     message: "请上传水费缴纳凭证",
        //     trigger: "blur",
        //   },
        // ],
        // electricRatePayVoucher: [
        //   {
        //     required: true,
        //     message: "请上传电费缴纳凭证",
        //     trigger: "blur",
        //   },
        // ],
        businessLicense: [
          { required: true, message: "请上传营业执照", trigger: "blur" },
        ],
      },
      // 历史信息
      historyForm: {
        id: "",
        honorCertificateOfCompany: [], //上传公司荣誉证书
        honorCertificateOfManagementTeam: [], //上传团队荣誉证书
        honorOfCompany: "", //公司获得荣誉
        honorOfManagementTeam: "", //公司管理团队获得荣誉
        creditInvestigationOfCompany: "", //公司征信上传
        creditInvestigationOfLegalPerson: "", //公司法人征信上传
      },
      historyrules: {},
      // 关系信息
      relationForm: {
        id: "",
        firstDealerName: "", //公司第一大经销商名称
        firstDealerNum: "", //第一大经销商年均采购数量、金额
        secondDealerName: "", //公司第二大经销商名称
        secondDealerNum: "", //第二大经销商年均采购数量、金额
        thirdDealerNum: "", //第三大经销商年均采购数量、金额
        thirdDealerName: "", //公司第三大经销商名称
        legalPersonDwellTime: "", //法人当地居住时间
        companySetUpTime: "", //公司当地成立时间
        isLeadingEnterprise: "", //:公司是否属于当地龙头企业
        hasManagerWarrant: "", //公司是否获取经营权证
        legalPersonInfo: "", //法人简介
        legalPersonOfCompanyName: "", //法人入股公司名称
        ratioOfShareHolding: "", //占股比例
      },
      relationrules: {},
      cardUpUrl: this.baseUrl + "/sys/file/uploadIdCard",
      loading: false,
      isEditPage: true, //是否是编辑页面
      baseOptions:[]
    };
  },
  mounted() {
    console.log(Cookie.get("token"));
    if (!this.isLogin) {
      this.$router.push("/login");
    }
    if (this.$route.query.isEditPage) {
      this.isEditPage = true;
      this.getDetail(this.$route.query.id);
    }
      this.getBaseList()
    
  },
  methods: {
    // 获取基地列表
    getBaseList () {
      this.$http("get", "/sys/iaBaseFoundation/findBaseFoundationListByPage.do")
        .then((res) => {
          if (res.code == "0000") {
            this.baseOptions = res.result.rows
             }
    
        })
        
    },
    // 获取编辑详情
    getDetail(id) {
      this.loading = true;
      this.$http("get", "/sys/iaFarmerLoans/detail.do?id=" + id)
        .then((res) => {
          if (res.code == "0000") {
            var data = res.result;
            data.hasCar = String(data.hasCar);
            data.hasHouse = String(data.hasHouse);
            data.isMarried = String(data.isMarried);
            data.hasHighWay = String(data.hasHighWay);
            data.baseId = String(data.baseId);
            if (data.patentsUrl != "" && data.patentsUrl != undefined) {
              var patentsUrl = data.patentsUrl.split(",");

              var patentsUrlList = [];
              for (var k in patentsUrl) {
                patentsUrlList.push({ url: patentsUrl[k] });
              }
              data.patentsUrl = patentsUrlList;
            } else {
              data.patentsUrl = [];
            }
            if (data.honorCertificateOfCompany != "" && data.honorCertificateOfCompany != undefined) {
              var honorCertificateOfCompany = data.honorCertificateOfCompany.split(
                ","
              );
              var honorCertificateOfCompanyList = [];
              for (var y in honorCertificateOfCompany) {
                honorCertificateOfCompanyList.push({
                  url: honorCertificateOfCompany[y],
                });
              }
              data.honorCertificateOfCompany = honorCertificateOfCompanyList;
            } else {
              data.honorCertificateOfCompany = [];
            }
                  var honorCertificateOfManagementTeamList = [];
            if (data.honorCertificateOfManagementTeam != "" && data.honorCertificateOfManagementTeam != undefined) {
               console.log(data.honorCertificateOfManagementTeam)
              var honorCertificateOfManagementTeam = data.honorCertificateOfManagementTeam.split(
                ","
              );
          
              for (var i in honorCertificateOfManagementTeam) {
                honorCertificateOfManagementTeamList.push({
                  url: honorCertificateOfManagementTeam[i],
                });
              }
              data.honorCertificateOfManagementTeam = honorCertificateOfManagementTeamList;
            } else {
              data.honorCertificateOfManagementTeam = [];
            }
            var cardForm = this.cardForm; // 基本信息
            var valueForm = this.valueForm; // 价值信息
            var powerForm = this.powerForm;
            var historyForm = this.historyForm;
            var relationForm = this.relationForm;
            Object.keys(cardForm).forEach((key) => {
              cardForm[key] = data[key];
            });
            Object.keys(relationForm).forEach((key) => {
              relationForm[key] = data[key];
            });
            Object.keys(valueForm).forEach((key) => {
              valueForm[key] = data[key];
            });
            Object.keys(powerForm).forEach((key) => {
              powerForm[key] = data[key];
            });
            Object.keys(historyForm).forEach((key) => {
              historyForm[key] = data[key];
            });
            this.cardForm = cardForm;
            this.valueForm = valueForm;
            this.powerForm = powerForm;
            this.historyForm = historyForm;
            this.relationForm = relationForm;
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 选择婚姻
    selectMarried (val) {
      console.log(val)
      if (val==0) {
        this.cardForm.mateName=''
        this.cardForm.mateIdCard=''
        this.cardForm.mateTelephone=''
        this.cardForm.mateIncome=''
        this.cardForm.mateUnit=''
      }
    },
    // 选则是否有车
    selectCar (val) {
   console.log(val)
      if (val==0) {
        this.cardForm.carModel=''
        this.cardForm.buyCarDate=''
        this.cardForm.carNo=''
        this.cardForm.carstate=''
      }
    },
    // 选择是否有房子
    selectHouse(val) {
  console.log(val)
      if (val==0) {
        this.cardForm.housestate=''
        this.cardForm.buyHouseDate=''
        this.cardForm.houseArea=''
        this.cardForm.houseLocation=''
      }
    },
    // 选 项卡切换
    tabsHandClick(index) {
      this.active = index;
      if (this.$refs.powerruleForm) {
        this.$refs.powerruleForm.clearValidate();
      }
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.clearValidate();
      }
      if (this.$refs.historyruleForm) {
        this.$refs.historyruleForm.clearValidate();
      }
      if (this.$refs.relationruleForm) {
        this.$refs.relationruleForm.clearValidate();
      }
      if (this.$refs.valueruleForm) {
        this.$refs.valueruleForm.clearValidate();
      }
    },
    // 上传银行卡图片
    updateBank(img) {
      this.cardForm.bankCardUrl = img;
    },
    // 上传行驶证
    updateDrivingLicenseUrl(img) {
      this.cardForm.drivingLicenseUrl = img;
    },
    // 身份证正面
    updateCardFront(img) {
      this.cardForm.idCardUrlFront = img;
    },
    // 身份证反面
    updateCardreverse(img) {
      this.cardForm.idCardUrlReverse = img;
    },
    // 租房合同图片
    updatecontractTenancy(img) {
      this.valueForm.contractTenancy = img;
    },
    //上传房租缴纳凭证
    updatepayVoucher(img) {
      this.valueForm.payVoucher = img;
    },
    // 上传水费缴纳凭证
    updateWaterFee(img) {
      this.powerForm.waterRatePayVoucher = img;
    },
    // 上传电费缴纳凭证
    updateelectricityFee(img) {
      this.powerForm.electricRatePayVoucher = img;
    },
    // 上传营业执照
    updateOpenPhotp(img) {
      this.powerForm.businessLicense = img;
    },
    // 上传公司征信
    updateCreditInvestigationOfCompany(img) {
      this.historyForm.creditInvestigationOfCompany = img;
    },
    //公司法人征信上传
    updateCreditInvestigationOfLegalPerson(img) {
      this.historyForm.creditInvestigationOfLegalPerson = img;
    },

    onSubmit(formName, type) {
      var historyForm = JSON.parse(JSON.stringify(this.historyForm));
      var powerForm = JSON.parse(JSON.stringify(this.powerForm));
      var data = {};
      var isOver = false;
      var companyData = historyForm.honorCertificateOfCompany;
      var companyList = [];
      if (companyData.length > 0) {
        for (var k in companyData) {
          companyList.push(companyData[k].url);
        }
        historyForm.honorCertificateOfCompany = companyList.join(",");
      } else {
        historyForm.honorCertificateOfCompany = "";
      }
      var patentsUrl = powerForm.patentsUrl;
      var patentsUrlList = [];
      if (patentsUrl.length > 0) {
        for (var k in patentsUrl) {
          patentsUrlList.push(patentsUrl[k].url);
        }
        powerForm.patentsUrl = patentsUrlList.join(",");
      } else {
        powerForm.patentsUrl = "";
      }
      var honorCertificateOfManagementTeam =
        historyForm.honorCertificateOfManagementTeam;
      var honorCertificateOfManagementTeamList = [];
      if (honorCertificateOfManagementTeam.length > 0) {
        for (var k in honorCertificateOfManagementTeam) {
          honorCertificateOfManagementTeamList.push(
            honorCertificateOfManagementTeam[k].url
          );
        }
        historyForm.honorCertificateOfManagementTeam = honorCertificateOfManagementTeamList.join(
          ","
        );
      } else {
        historyForm.honorCertificateOfManagementTeam = "";
      }
      if (type == 4) {
        isOver = true;
      }
      data = Object.assign(
        {},
        this.cardForm,
        this.valueForm,
        powerForm,
        historyForm,
        this.relationForm
      );
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http(
            "post",
            "/sys/iaFarmerLoans/operate.do?isOver=" + isOver,
            data,
            "json"
          )
            .then((res) => {
              if (res.code == "0000") {
                this.valueForm.id = res.result;
                this.powerForm.id = res.result;
                this.historyForm.id = res.result;
                this.relationForm.id = res.result;
                this.$message({
                  type: "success",
                  message: "保存成功",
                });
                console.log(type);
                if (type != 4) {
                  this.active = type + 1;
                  console.log(this.active);
                }
                if (type == 4) {
                  this.$router.push({
                    path: "/memberCenter/indexCenter",
                    query: { applyStatus: false },
                  });
                }
              }
              this.loading = false;
            })
            .catch((err) => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style  scoped>
.tabs {
  background: #fff;
  height: 52px;
  margin-top: 10px;
}
.tabs ul li {
  float: left;
  width: 100px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 32px;
  margin-left: 60px;
  cursor: pointer;
  margin-top: 10px;
}
.tabs ul li:hover {
  color: #f48d06;
}
.tabs ul li.active {
  color: #f48d06;
  border-bottom: 3px solid #f48d06;
}
.box {
  min-height: 300px;
  margin-top: 30px;
}
.title {
  line-height: 35px;
  font-size: 16px;
  color: #4a4a4a;
  position: relative;
  margin-left: 50px;
  margin-top: 20px;
}
.title::before {
  position: absolute;
  width: 5px;
  height: 20px;
  background: #f48d06;
  border-radius: 2px;
  content: " ";
  top: 5px;
  left: -10px;
}

.form-group {
  width: 1200px;
}
</style>
<style>
.form-group .el-input__inner {
  width: 219px;
  line-height: 32px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}
.form-group .el-form-item__label {
  margin-bottom: 0;
  padding-bottom: 0;

  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
}
.form-group .el-form-item {
  margin-right: 32px;
}
.bgf {
  background: #ffffff;
  width: 1080px;
  padding: 20px;
  margin: 5px auto;
}
.next-btn {
  width: 159px;
  height: 44px;
  background: #f48d06;
  border-radius: 2px;
  color: #fff;
}
.next-btn:hover {
  opacity: 0.8;
  background: #f48d06;
  border-radius: 2px;
  color: #fff;
}
.cancle {
  width: 159px;
  height: 44px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #f48d06;
  color: #f48d06;
  margin-left: 60px !important;
}
.cancle:hover {
  opacity: 0.8;
  background: #f48d06;
  border-radius: 2px;
  color: #fff;
}
.form-group .el-textarea {
  width: 100%;
}
.form-group .el-textarea__inner {
  width: 100%;
}
</style>